// @use "./_var.scss" as *;

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    // 'white': #ffffff,
    // 'black': #000000,
    "primary": ("base": $color-primary),
    // 'success': (
    //   'base': #67c23a,
    // ),
    // 'warning': (
    //   'base': #e6a23c,
    // ),
    // 'danger': (
    //   'base': #f56c6c,
    // ),
    // 'error': (
    //   'base': #f56c6c,
    // ),
    // 'info': (
    //   'base': #909399,
    // ),,,
  ),
  $text-color: (
    "primary": $color-text-heavy,
    "regular": $color-text-main,
    "secondary": $color-text-light,
    // "placeholder": $color-text-lighter,
  ),
  $border-color: (
    "base": $color-border-main,
    "light": $color-border-light,
    "lighter": $color-border-lighter,
    // 'extra-light': #f2f6fc,
  ),
  $border-radius: (
    "base": $radius-main,
    "small": $radius-lighter,
    // 'round': 20px,
    // 'circle': 100%,,,
  ),
  // $box-shadow:(
  //   'base': (
  //     0 2px 4px rgba(0, 0, 0, 0.12),
  //     0 0 6px rgba(0, 0, 0, 0.04),
  //   ),
  //   'light': 0 2px 12px 0 rgba(0, 0, 0, 0.1),
  // ),
  $font-size:
    (
      "extra-large": $font-size-heavyest,
      "large": $font-size-heavyer,
      "medium": $font-size-heavy,
      "base": $font-size-main,
      "small": $font-size-light,
      "extra-small": $font-size-lighter,
    ),
  // $disabled: (
  //   'bg-color': var(--el-bg-color),
  //   'text-color': var(--el-text-color-placeholder),
  //   'border-color': var(--el-border-color-light),
  // ),
  // $common-component-size: (
  //   'large': 40px,
  //   'default': 32px,
  //   'small': 24px,
  // ),
  $checkbox:
    (
      "font-size": $font-size-main,
      // 'font-weight': var(--el-font-weight-primary),
      // 'text-color': var(--el-text-color-regular),
      "input-height": $font-size-main,
      "input-width": $font-size-main,
      // 'border-radius': $radius-main,
      // 'bg-color': var(--el-color-white),
      // 'input-border': var(--el-border-base),
      // 'disabled-border-color': var(--el-border-color-base),
      // 'disabled-input-fill': #edf2fc,
      // 'disabled-icon-color': var(--el-text-color-placeholder),
      // 'disabled-checked-input-fill': var(--el-border-color-extra-light),
      // 'disabled-checked-input-border-color': var(--el-border-color-base),
      // 'disabled-checked-icon-color': var(--el-text-color-placeholder),
      // 'checked-text-color': var(--el-color-primary),
      // 'checked-input-border-color': var(--el-color-primary),
      // 'checked-bg-color': var(--el-color-primary),
      // 'checked-icon-color': var(--el-fill-base),
      // 'input-border-color-hover': var(--el-color-primary),,,
    ),
  // $checkbox-button: (
  //   'checked-bg-color': var(--el-color-primary),
  //   'checked-text-color': var(--el-color-white),
  //   'checked-border-color': var(--el-color-primary),
  // ),
  $checkbox-bordered-padding-left:
    (
      "large": $gap-half * 1.5,
      "default": $gap-half,
      "small": $gap-qtr,
    ),
  $checkbox-bordered-padding-right: (
    "large": $gap-one-half,
    "default": $gap,
    "small": $gap-half,
  ),
  $radio: (
    "font-size": $font-size-main,
    // 'text-color': var(--el-text-color-regular),
    // 'font-weight': var(--el-font-weight-primary),
    "input-height": $font-size-main,
    "input-width": $font-size-main,
    "input-border-radius": $radius-light,
    // 'input-bg-color': var(--el-color-white),
    // 'input-border': var(--el-border-base),
    // 'input-border-color': var(--el-border-color-base),
    // 'input-border-color-hover': var(--el-color-primary),,,
  ),
  // $radio-button: (
  //   'checked-bg-color': var(--el-color-primary),
  //   'checked-text-color': var(--el-color-white),
  //   'checked-border-color': var(--el-color-primary),
  //   'disabled-checked-fill': var(--el-border-color-extra-light),
  // ),
  // $radio-disabled: (
  //   'input-border-color': var(--el-disabled-border-color),
  //   'input-fill': var(--el-disabled-bg-color),
  //   'icon-color': var(--el-disabled-bg-color),
  //   'checked-input-border-color': var(--el-disabled-border-color),
  //   'checked-input-fill': var(--el-disabled-bg-color),
  //   'checked-icon-color': var(--el-text-color-placeholder),
  // ),
  // $radio-checked: (
  //   'text-color': var(--el-color-primary),
  //   'input-border-color': var(--el-color-primary),
  //   'icon-color': var(--el-color-primary),
  // ),
  $radio-bordered-input-height:
    (
      "large": $font-size-heavy,
      "default": $font-size-main,
      "small": $font-size-lighter,
    ),
  $radio-bordered-input-width: (
    "large": $font-size-heavy,
    "default": $font-size-main,
    "small": $font-size-lighter,
  ),
  $select: (
    // 'border-color-hover': var(--el-border-color-hover),
    // 'disabled-border': var(--el-disabled-border-color),
    "font-size": $font-size-main,
    // 'close-hover-color': var(--el-text-color-secondary),
    // 'input-color': var(--el-text-color-placeholder),
    // 'multiple-input-color': var(--el-text-color-regular),
    // 'input-focus-border-color': var(--el-color-primary),
    "input-font-size": $font-size-main,
  ),
  // $select-option: (
  // 'text-color': var(--el-text-color-regular),
  // 'disabled-color': var(--el-text-color-placeholder),
  // 'height': 34px,
  // 'hover-background': var(--el-bg-color),
  // 'selected-text-color': var(--el-color-primary),
  // ),
  // $select-group: (
  //   'text-color': var(--el-color-info),
  //   'height': 30px,
  //   'font-size': 12px,
  // ),
  $select-dropdown:
    (
      // 'bg-color': var(--el-color-white),
      // 'shadow': var(--el-box-shadow-light),
      // 'empty-color': var(--el-text-color-secondary),
      // 'max-height': 274px,
      "padding": $gap-qtr 0,
      "empty-padding": $gap-half 0,
      // 'border': 1px solid var(--el-border-color-light),
    ),
  $alert: (
    "padding": $gap-half $gap,
    "border-radius-base": $radius-main,
    "title-font-size": $font-size-main,
    "description-font-size": $font-size-lighter,
    "close-font-size": $font-size-lighter,
    "close-customed-font-size": $font-size-main,
    "icon-size": $font-size-heavy,
    // 'icon-large-size': 28px,
  ),
  $messagebox: (
    // 'title-color': var(--el-text-color-primary),
    // 'width': 420px,
    "border-radius": $radius-main,
    // 'font-size': var(--el-font-size-large),
    // 'content-font-size': var(--el-font-size-base),
    // 'content-color': var(--el-text-color-regular),
    // 'error-font-size': 12px,
    "padding-primary": $gap,
  ),
  $message: (
    // 'min-width': 380px,
    // 'bg-color': #edf2fc,
    "padding": $gap $gap $gap $gap-one-half,
    "close-size": $font-size-heavy,
    // 'close-icon-color': var(--el-text-color-placeholder),
    // 'close-hover-color': var(--el-text-color-secondary),,,
  ),
  $notification: (
    // 'width': 330px,
    "padding": $gap $gap-one-half $gap $gap,
    "radius": $radius-main,
    // 'shadow': var(--el-box-shadow-light),
    // 'border-color': var(--el-border-color-lighter),
    // 'icon-size': 24px,
    // 'close-font-size':
    //   var(--el-message-close-size, map.get($message, 'close-size')),
    "group-margin-left": $gap,
    "group-margin-right": $gap-half,
    // 'content-font-size': var(--el-font-size-base),
    // 'content-color': var(--el-text-color-regular),
    "title-font-size": $font-size-heavy,
    // 'title-color': var(--el-text-color-primary),
    // 'close-color': var(--el-text-color-secondary),
    // 'close-hover-color': var(--el-text-color-regular),,,
  ),
  $input: (
    // 'text-color': var(--el-text-color-regular),
    // 'border': var(--el-border-base),
    // 'border-color': var(--el-border-color-base),
    "border-radius": $radius-light,
    // 'bg-color': var(--el-color-white),
    // 'icon-color': var(--el-text-color-placeholder),
    "placeholder-color": #ddd,
    // var(--el-text-color-placeholder),
    // 'hover-border': var(--el-border-color-hover),
    // 'clear-hover-color': var(--el-text-color-secondary),
    // 'focus-border': var(--el-color-primary),,,
  ),
  // $input-disabled: (
  //   'fill': var(--el-disabled-bg-color),
  //   'border': var(--el-disabled-border-color),
  //   'text-color': var(--el-disabled-text-color),
  //   'placeholder-color': var(--el-text-color-placeholder),
  // ),
  $input-font-size:
    (
      "large": $font-size-heavy,
      "default": $font-size-main,
      "small": $font-size-lighter,
    ),
  // $input-number-width: (
  //   'large': 180px,
  //   'default': 150px,
  //   'small': 120px,
  // ),
  $input-padding-horizontal:
    (
      "large": $gap-half * 1.5,
      "default": $gap-half,
      "small": $gap-qtr,
    ),
  $cascader: (
    // 'menu-text-color': var(--el-text-color-regular),
    // 'menu-selected-text-color': var(--el-color-primary),
    // 'menu-fill': var(--el-fill-base),
    "menu-font-size": $font-size-main,
    "menu-radius": $radius-main,
    // 'menu-border': solid 1px var(--el-border-color-light),
    // 'menu-shadow': var(--el-box-shadow-light),
    // 'node-background-hover': var(--el-bg-color),
    // 'node-color-disabled': var(--el-text-color-placeholder),
    // 'color-empty': var(--el-text-color-placeholder),
    // 'tag-background': #f0f2f5,,,
  ),
  // $button: (
  //   'font-weight': var(--el-font-weight-primary),
  //   'border-color': var(--el-border-color-base),
  //   'bg-color': var(--el-color-white),
  //   'text-color': var(--el-text-color-regular),
  //   'disabled-text-color': var(--el-disabled-text-color),
  //   'disabled-bg-color': var(--el-color-white),
  //   'disabled-border-color': var(--el-border-color-light),
  //   'divide-border-color': rgba($color-white, 0.5),
  //   'hover-text-color': var(--el-color-primary),
  //   'hover-bg-color': var(--el-color-primary-light-9),
  //   'hover-border-color': var(--el-color-primary-light-7),
  //   'active-text-color': var(--el-button-hover-text-color),
  //   'active-border-color': var(--el-color-primary),
  //   'active-bg-color': var(--el-button-hover-bg-color),
  // ),
  // $button-font-size: (
  //   'large': var(--el-font-size-base, map.get($font-size, 'base')),
  //   'default': var(--el-font-size-base, map.get($font-size, 'base')),
  //   'small': 12px,
  // ),
  $button-border-radius:
    (
      "large": $radius-heavyer,
      "default": $radius-main,
      "small": $radius-lighter,
    ),
  $button-padding-vertical: (
    "large": $gap-half * 1.5,
    "default": $gap-half,
    "small": $gap-qtr,
  ),
  $button-padding-horizontal: (
    "large": $gap * 1.5,
    "default": $gap,
    "small": $gap-qtr,
  ),
  $switch: (
    // 'on-color': var(--el-color-primary),
    // 'off-color': var(--el-border-color-base),
    // 'core-border-radius': 10px,
    // 'width': 40px,
    // 'height': 20px,
    "button-size": $font-size-heavy,
  ),
  $dialog: (
    // 'width': 50%,
    // 'margin-top': 15vh,
    // 'bg-color': var(--el-color-white),
    // 'box-shadow': 0 1px 3px rgba(0, 0, 0, 0.3),
    // 'title-font-size': var(--el-font-size-large),
    "content-font-size": $font-size-main,
    // 'font-line-height': var(--el-font-line-height-primary),
    "padding-primary": $gap,
  ),
  // $table: (
  //   'border-color': var(--el-border-color-lighter),
  //   'border': 1px solid var(--el-table-border-color),
  //   'text-color': var(--el-text-color-regular),
  //   'header-text-color': var(--el-text-color-secondary),
  //   'row-hover-bg-color': var(--el-bg-color),
  //   'current-row-bg-color': var(--el-color-primary-light-9),
  //   'header-bg-color': $color-gradient-dark,
  //   'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
  //   'bg-color': var(--el-color-white),
  //   'tr-bg-color': var(--el-color-white),
  //   'expanded-cell-bg-color': var(--el-color-white),
  // ),
  $table-font-size:
    (
      // 'large': var(--el-font-size-base, map.get($font-size, 'base')),
      "default": $font-size-main,
      "small": $font-size-lighter,
    ),
  $table-padding: (
    "large": 10px 0,
    "default": 6px 0,
    "small": 2px 0,
  ),
  $table-cell-padding: (
    "large": 0 $gap-half * 1.5,
    "default": 0 $gap-half,
    "small": 0 $gap-qtr,
  ),
  $pagination: (
    "font-size": $font-size-main,
    // 'bg-color': var(--el-color-white),
    // 'text-color': var(--el-text-color-primary),
    "border-radius": $radius-main,
    // 'button-color': var(--el-text-color-primary),
    // 'button-width': 32px,
    // 'button-height': 32px,
    // 'button-disabled-color': var(--el-text-color-placeholder),
    // 'button-disabled-bg-color': var(--el-color-white),
    // 'hover-color': var(--el-color-primary),
    // 'height-extra-small': 24px,
    // 'line-height-extra-small': var(--el-pagination-height-extra-small),,,
  ),
  // $popup: (
  //   'modal-bg-color': var(--el-color-black),
  //   'modal-opacity': 0.5,
  // ),
  $popover:
    (
      // 'bg-color': var(--el-color-white),
      "font-size": $font-size-main,
      // 'border-color': var(--el-border-color-lighter),
      "padding": $gap,
      "padding-large": $gap,
      "title-font-size": $font-size-heavy,
      // 'title-text-color': var(--el-text-color-primary),
      "border-radius": $radius-main,
    ),
  $popper: (
    "border-radius": var(--el-popover-border-radius, $radius-main),
  ),
  $skeleton: (
    "color": #f2f2f2,
    "to-color": #e6e6e6,
  ),
  $tag: (
    "font-size": $font-size-lighter,
    "border-radius": $radius-light,
  ),
  // $tag-height:(
  //   'large': 32px,
  //   'default': 24px,
  //   'small': 20px,
  // ),
  $tag-padding:
    (
      "large": $gap-half * 1.5,
      "default": $gap-half,
      "small": $gap-qtr,
    ),
  $tag-icon-size: (
    "large": $font-size-heavy,
    "default": $font-size-main,
    "small": $font-size-lighter,
  ),
  // $tree: (
  //   'node-hover-bg-color': var(--el-bg-color),
  //   'text-color': var(--el-text-color-regular),
  //   'expand-icon-color': var(--el-text-color-placeholder),
  // ),
  // $dropdown: (
  //   'menu-box-shadow': var(--el-box-shadow-light),
  //   'menuItem-hover-fill': var(--el-color-primary-light-9),
  //   'menuItem-hover-color': var(--el-color-primary-light-2),
  //   'menu-index': 10,
  // ),
  $drawer:
    (
      // 'bg-color': var(--el-dialog-bg-color, var(--el-color-white)),
      "padding-primary": var(--el-dialog-padding-primary, $gap),
    ),
  $badge: (
    // 'bg-color': var(--el-color-danger),
    "radius": $radius-heavy,
    "font-size": $font-size-lighter,
    "padding": $gap-qtr,
    "size": $font-size-heavyer,
  ),
  $card: (
    // 'border-color':
    //   var(--el-border-color-light, map.get($border-color, 'lighter')),
    "border-radius": $radius-main,
    "padding": $gap,
    // 'bg-color': var(--el-color-white),
  ),
  // $dark-card: (
  //   'bg-color': var(--el-color-black),
  // ),
  // $slider: (
  //   'main-bg-color': var(--el-color-primary),
  //   'runway-bg-color': var(--el-border-color-light),
  //   'stop-bg-color': var(--el-color-white),
  //   'disable-color': var(--el-text-color-placeholder),
  //   'border-radius': 3px,
  //   'height': 6px,
  //   'button-size': 20px,
  //   'button-wrapper-size': 36px,
  //   'button-wrapper-offset': -15px,
  // ),
  $menu:
    (
      // 'active-color': var(--el-color-primary),
      // 'text-color': var(--el-text-color-primary),
      // 'hover-text-color': var(--el-text-color-primary),
      // 'bg-color': var(--el-color-white),
      // 'hover-bg-color': var(--el-color-primary-light-9),
      "item-height": $height-heavy,
      // 'item-font-size': var(--el-font-size-base),
      // 'item-hover-fill': var(--el-color-primary-light-9),
      // 'border-color': #e6e6e6,,,
    ),
  $rate: (
    // 'height': 20px,
    "font-size": $font-size-main,
    "icon-size": $font-size-heavyer,
    // 'icon-margin': 6px,
    // 'icon-color': var(--el-text-color-placeholder),
    // 'void-color': #c6d1de,
    // 'star-color': #f7ba2a,
    // 'disable-void-color': #eff2f7,
    // 'text-color': #1f2d3d,,,
  ),
  // $datepicker:(
  //   'text-color': var(--el-text-color-regular),
  //   'off-text-color': var(--el-text-color-placeholder),
  //   'header-text-color': var(--el-text-color-regular),
  //   'icon-color': var(--el-text-color-primary),
  //   'border-color': var(--el-disabled-border-color),
  //   'inner-border-color': var(--el-border-color-light),
  //   'inrange-bg-color': var(--el-border-color-extra-light),
  //   'inrange-hover-bg-color': var(--el-border-color-extra-light),
  //   'active-color': var(--el-color-primary),
  //   'hover-text-color': var(--el-color-primary),
  // ),
  // $date-editor: (
  //   'width': 220px,
  //   'monthrange-width': 300px,
  //   'daterange-width': 350px,
  //   'datetimerange-width': 400px,
  // ),
  // $loading: (
  //   'spinner-size': 42px,
  //   'fullscreen-spinner-size': 50px,
  // ),
  // $scrollbar: (
  //   'opacity': 0.3,
  //   'bg-color': var(--el-text-color-secondary),
  //   'hover-opacity': 0.5,
  //   'hover-bg-color': var(--el-text-color-secondary),
  // ),
  $carousel:
    (
      "arrow-font-size": $font-size-main,
      "arrow-size": $height-main,
      // 'arrow-background': rgba(31, 45, 61, 0.11),
      // 'arrow-hover-background': rgba(31, 45, 61, 0.23),
      // 'indicator-width': 30px,
      // 'indicator-height': 2px,
      // 'indicator-padding-horizontal': 4px,
      // 'indicator-padding-vertical': 12px,
      // 'indicator-out-color': var(--el-border-color-hover),,,
    ),
  $collapse: (
    // 'border-color': var(--el-border-color-lighter),
    "header-height": $height-heavyer,
    // 'header-bg-color': var(--el-color-white),
    // 'header-text-color': var(--el-text-color-primary),
    "header-font-size": $font-size-main,
    // 'content-bg-color': var(--el-color-white),
    "content-font-size": $font-size-main,
    // 'content-text-color': var(--el-text-color-primary),
  ),
  $transfer: (
    // 'border-color': var(--el-border-color-lighter),
    "border-radius": $radius-main,
    // 'panel-width': 200px,
    // 'panel-header-height': 40px,
    // 'panel-header-bg-color': var(--el-bg-color),
    // 'panel-footer-height': 40px,
    // 'panel-body-height': 278px,
    // 'item-height': 30px,
    // 'filter-height': 32px,,,
  ),
  $timeline: (
    "node-size-normal": $font-size-lighter,
    "node-size-large": $font-size-main,
    // 'node-color': var(--el-border-color-light),
  ),
  // $backtop: (
  //   'bg-color': var(--el-color-white),
  //   'text-color': var(--el-color-primary),
  //   'hover-bg-color': var(--el-border-color-extra-light),
  // ),
  $link:
    (
      "font-size": $font-size-main,
      // 'font-weight': var(--el-font-weight-primary),
      // 'default-text-color': var(--el-text-color-regular),
      // 'default-active-color': var(--el-color-primary),
      // 'disabled-text-color': var(--el-text-color-placeholder),,,
    ),
  // $calendar: (
  //   'border': var(--el-table-border, 1px solid var(--el-border-color-lighter)),
  //   'header-border-bottom': var(--el-calendar-border),
  //   'selected-bg-color': #f2f8fe,
  //   'cell-width': 85px,
  // ),
  $form:
    (
      "label-font-size": $font-size-main,
    ),
  $avatar: (
    // 'text-color': #fff,
    // 'bg-color': #c0c4cc,
    "text-size": $font-size-main,
    "icon-size": $font-size-heavyer,
    "border-radius": $radius-main,
  ),
  // $avatar-size: (
  //   'large': 56px,
  //   'default': 40px,
  //   'small': 24px,
  // ),
  $empty:
    (
      "padding": $gap-two 0,
      // 'image-width': 160px,
      "description-margin-top": $gap,
      "bottom-margin-top": $gap,
      "fill-color-0": var(--el-color-white),
      "fill-color-1": #ebebec,
      "fill-color-2": #e7e8ea,
      "fill-color-3": #e6e7eb,
      "fill-color-4": #dddee2,
      "fill-color-5": #dcdde1,
      "fill-color-6": #d8dade,
      "fill-color-7": #d4d6d8,
      "fill-color-8": #cfd2d8,
      "fill-color-9": #c4c6cd,
    ),
  // $descriptions:(
  //   'table-border': 1px solid var(--el-border-color-lighter),
  //   'item-bordered-label-background': #f5f7fa,
  // ),
  $result:
    (
      // 'padding': 40px 30px,
      // 'icon-font-size': 64px,
      "title-font-size": $font-size-heavyest,
      "title-margin-top": $gap,
      "subtitle-margin-top": $gap-half,
      "extra-margin-top": $gap-one-half,
    ),
  // $transition: (
  //   'all': all var(--el-transition-duration)
  //     var(--el-transition-function-ease-in-out-bezier),
  //   'fade': opacity var(--el-transition-duration)
  //     var(--el-transition-function-fast-bezier),
  //   'md-fade': (
  //     transform var(--el-transition-duration)
  //       var(--el-transition-function-fast-bezier),
  //     opacity var(--el-transition-duration)
  //       var(--el-transition-function-fast-bezier),
  //   ),
  //   'fade-linear': opacity var(--el-transition-duration-fast) linear,
  //   'border': border-color var(--el-transition-duration-fast)
  //     var(--el-transition-function-ease-in-out-bezier),
  //   'color': color var(--el-transition-duration-fast)
  //     var(--el-transition-function-ease-in-out-bezier),
  // ),
  // $transition-duration: (
  //   'default': 0.3s,
  //   'fast': 0.2s,
  // ),
  // $transition-function: (
  //   'ease-in-out-bezier': cubic-bezier(0.645, 0.045, 0.355, 1),
  //   'fast-bezier': cubic-bezier(0.23, 1, 0.32, 1),
  // ),
  $header:
    (
      "padding": 0 $gap,
      // 'height': 60px,
    ),
  $main: (
    "padding": $gap,
  ),
  $footer: (
    "padding": 0 $gap,
    // 'height': 60px,
  )
);
@use "element-plus/theme-chalk/src/index.scss" as *;
